<template>
  <section id="goods-manage">
    <c-title :hide="false" :text="$i18n.t('base.productManagement')"></c-title>
    <van-search v-model="goods_search" :placeholder="$i18n.t('base.pleaseEnterProductName')"
    @search="onSearch"
    @cancel="onCancel" shape="round" />
    <van-tabs v-model="active" @change="changeTabs" class="status-tab" v-if="this.$route.name == 'AppointmentGoodManagerment'">
      <van-tab title="全部" name=""></van-tab>
      <van-tab title="在售商品" :name="1"></van-tab>
      <van-tab title="下架商品" :name="0"></van-tab>
    </van-tabs>
    <section id="release-goods">
      <div class="number">
        <div>{{ $i18n.t('base.productQuantity') }}: {{goods_length}}</div>
        <div v-if="goods_stock" class="f-12 t-l" style="color: #666;line-height: 24px;">{{ $i18n.t('base.inventory') }}: {{goods_stock}}</div>
      </div>
      <div class="release-b" @click="routeTake()" v-if="checkName">{{ $i18n.t('base.publishProduct') }}</div>
    </section>
    <section id="goods-list" v-if="checkName">
      <div class="goods-list" v-for="(item,index) in commodity_data" :key="index">
        <div class="goods-a">
          <img style="width: 100%; height:auto;" :src="item.thumb" v-if="$route.name == 'AppointmentGoodManagerment'">
          <img style="width: 100%; height:auto;" :src="item.change_thumb" v-else>
        </div>
        <ul class="goods-b">
          <li class="name" :class="{'goods-b-top':type==='store' || $route.name == 'AppointmentGoodManagerment'}">
            <span class="goods-title" style="flex:1;">{{item.title|escapeTitle}}</span>
            <span v-if="type==='store'"
             :class="item.status===1?'status-red':'status-gray'">{{item.status === 1 ?$i18n.t('base.putOnShelf'):$i18n.t('base.takeOffShelf')}}</span>
            <span v-if="$route.name == 'AppointmentGoodManagerment'" :class="item.status === 1 ? 'status-red-bd' : 'status-gray-bd'">{{ item.status === 1 ? $i18n.t('base.putOnShelf') : $i18n.t('base.takeOffShelf') }}</span>
          </li>
          <li class="price">
            <span style="font-weight:bold;">{{$i18n.t('money')}}<span style="font-size: 1rem;">{{item.price}}</span>
            </span>
            <p v-if="type ==='store' && goods_audit!= 1" :class="item.status===0?'red':'gray'" @click.stop="changeGoodsStatus(item,index)"><span>{{ $i18n.t('base.click') }}</span>{{item.status === 0 ?$i18n.t('base.putOnShelf'):$i18n.t('base.takeOffShelf')}}</p>
            <p v-if="type !=='store' && goods_audit!= 1" :class="item.status===1?'red':'gray'" @click.stop="changeGoodsStatus(item,index)">{{item.status === 1 ?$i18n.t('base.putOnShelf'):$i18n.t('base.takeOffShelf')}}</p>
          </li>
          <li class="info">
            <span>{{ $i18n.t('base.inventory') }}：{{item.stock}}</span>
            <span>{{ $i18n.t('base.sales') }}：{{item.virtual_sales ? item.virtual_sales+item.real_sales : item.real_sales}}</span>
          </li>
          <li class="btn">
            <span v-if="privileges_data.supplier_del_goods_privileges == '1'" @click="commodityDelete(index)">{{ $i18n.t('base.delete') }}</span>
            <span v-if="$route.name == 'AppointmentGoodManagerment' && item.status == 1" @click="listMethod(item)">{{ $i18n.t('base.takeOffShelf') }}</span>
            <span  @click="editJumpEvent(index)">{{ $i18n.t('base.edit') }}</span>
          </li>

        </ul>
      </div>
    </section>
    <!-- 咖啡机机主商品管理 -->
    <section v-if="!checkName" id="goods-list">
      <div class="goods-list" v-for="(item,index) in commodity_data" :key="index">
        <div class="goods-a">
          <img style="width: 100%; height: 100%;" :src="item.has_one_goods.thumb">
        </div>
        <ul class="goods-b">
          <li class="name">
            <span class="goods-title">{{item.has_one_goods.title|escapeTitle}}</span>
          </li>
          <li class="status" :class="item.has_one_goods.status===1?'red':'gray'">状态：{{item.has_one_goods.status_name}}</li>
          <li class="price">
            <span>
              {{$i18n.t('money')}} <span style="font-size: 16px;">{{item.has_one_goods.price}}</span>
            </span>
          </li>
          <li class="info">
            <font>库存：{{item.stock}}</font>
            <font>销量：{{item.sale_count}}</font>
          </li>

        </ul>
      </div>
    </section>
  </section>
</template>

<script>
import manage from "./management_controller.js";

export default manage;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  #goods-manage {
    #search-box {
      background-color: #fff;
      display: flex;
      height: 2.8125rem;
      line-height: 2.8125rem;
      position: relative;
      padding-left: 1.25rem;
      border-bottom: solid 0.0625rem #ebebeb;

      .search-a {
        background-color: #f2f2f2;
        height: 1.75rem;
        line-height: 1.75rem;
        border-radius: 0.875rem;
        display: flex;
        padding: 0 0.875rem;
        margin-top: 0.5313rem;
        width: 18.75rem;

        input {
          border: none;
          width: 90%;
          margin-left: 0.625rem;
        }
      }

      .search-b {
        width: 2.8125rem;
        height: 2.8125rem;
        position: absolute;
        right: 0;
      }
    }

    #release-goods {
      background-color: #fff;
      display: flex;
      justify-content:space-between;
      align-items:center;
      font-size: 16px;
      position: relative;
      margin:0.625rem 0.75rem;
      padding: 0.75rem;
      border-radius:0.5rem;
      .number{
        font-size: 1.125rem;
        font-weight: 500;
        color: #00001C;
      }
      .release-b{
        min-width: 4.6875rem;
        padding: 0 4px;
        height: 2rem;
        line-height:2rem;
        text-align:center;
        color:#fff;
        font-size:0.8125rem;
        background: #F15353;
        border-radius: 1.875rem;
      }
    }

    #goods-list {
      padding-bottom: 0.625rem;
      .btn{
        margin-top:0.9688rem;
        display:flex;
        align-items:center;
        justify-content:flex-end;
        span{
          min-width: 4.25rem;
          padding: 0 4px;
          height: 2rem;
          line-height:2rem;
          text-align:center;
          border-radius: 1.875rem 1.875rem 1.875rem 1.875rem;
          opacity: 1;
          border: 0.0313rem solid #AAAAB3;
          margin-left:0.375rem;

        }
      }
      .goods-list {
        background-color: #fff;
        padding: 0.75rem;
        display: flex;
        margin:0.625rem 0.75rem;
        border-radius:0.5rem;
        overflow:hidden;

        .goods-a {
          width: 5.625rem;
          // height: 5.625rem;
          // background-color: #F0F0F1;
          border-radius: 0.5rem;
          overflow:hidden;
          img{
           border-radius: 0.5rem;
          }
        }
        .goods-b-top{
          display:flex;
          align-items:center;
          justify-content: space-between;
          .status-red-bd{
            text-align:center;
            background: #fff;
            border-radius: 0.25rem;
            padding: 0.19rem 0.34rem;
            box-sizing: border-box;
            font-size: 0.75rem;
            font-weight: 400;
            color: #F15353;
            border: 1px solid #F15353;
          }
          .status-gray-bd{
            padding: 0.19rem 0.34rem;
            box-sizing: border-box;
            text-align:center;
            background: #AAAAB3;
            border-radius: 0.25rem 0.25rem 0.25rem 0.25rem;
            font-size: 0.75rem;
            font-weight: 400;
            color: #FFFFFF;
          }
          .status-red{
            width: 2.1875rem;
            height: 1.125rem;
            text-align:center;
            line-height: 1.125rem;
            background: #F15353;
            border-radius: 0.25rem 0.25rem 0.25rem 0.25rem;
            font-size: 0.75rem;
            font-weight: 400;
            color: #FFFFFF;
          }
          .status-gray{
            width: 2.1875rem;
            height: 1.125rem;
            text-align:center;
            line-height: 1.125rem;
            background: #AAAAB3;
            border-radius: 0.25rem 0.25rem 0.25rem 0.25rem;
            font-size: 0.75rem;
            font-weight: 400;
            color: #FFFFFF;

          }
        }

        .goods-b {
          margin: 0  0 0 0.625rem;
          width: 16.0625rem;
          text-align: left;
          line-height: 1.25rem;

          .status {
            font-size: 10px;
          }

          .red {
            color: #f15353;
          }

          .gray {
            color: #8c8c8c;
          }

          .name {
            height: 2.5rem;
            font-size: 14px;

            .goods-title {
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              font-size: 0.875rem;
              font-weight: 500;
              color: #00001C;
            }
          }

          .price {
            color: #f15353;
            font-size: 16px;
            overflow: hidden;

            p {
              float: right;
              padding: 0.1rem 0.4rem;
              color: #fff;
              font-size: 12px;
              border-radius: 0.5rem;
            }

            .red {
              background: #f15353;
              border: 1px solid #f15353;
            }

            .gray {
              background: #8c8c8c;
              border: 1px solid #8c8c8c;
            }

            span {
              font-size: 12px;
            }
          }

          .info {
            display:flex;
            align-items:center;
            position: relative;
            font-weight: 400;
            height:0.8125rem;
            line-height:0.8125rem;
            color: #6E6E79;
            font-size:0.8125rem;
            margin-top:0.5313rem;

            span {
              margin-right: 1.25rem;
            }

          }
        }
      }

      .goods-list:last-child {
        border: none;
      }
    }
  }
</style>
